<template>
	<view>
		<!-- 详情 -->
		<!-- #ifdef H5 -->
		<view class="tou">
			<u-icon name="arrow-left" size="50" @click="onfanhui"></u-icon>
		</view>
		<!-- #endif -->
		<ul>
			<li class="community-circle" v-for="item,index in list" :key="item.id">
				<view class="top">
					<view class="top-l">
						<u--image width='100rpx' height='100rpx' :src="item.avater" shape="circle"></u--image>
						<view>
							<p>{{item.nickname}}</p>
							<p>{{item.tatil}}</p>
						</view>
						<view>
							<uni-icons custom-prefix="iconfont" type="icon-huiyuanVIP" size="20"></uni-icons>
						</view>
					</view>
					<view>
						<button @click="onguanzu(index)" v-if="item.guanzu">关注</button>
						<button :plain="true" class="btn" @click="onguanzu(index)" v-else>已关注</button>
					</view>
				</view>
				<view class="bottom">
					<ul>
						<li>
							<h4>{{item.title}}</h4>
							<p>{{item.text}}</p>
							<p>{{item.text2}}</p>
							<p>{{item.text3}}</p>
							<p>{{item.text4}}</p>
							<ul class="bottom-img">
								<li v-for="items,indexs in item.src" :key="indexs">
									<u--image width='335rpx' height='335rpx' :src="items.Url">
									</u--image>
								</li>
							</ul>
						</li>
						<li>
						</li>
					</ul>

				</view>
				<view class="footer">
					<ul>
						<li>
							<view class="footer-l">
								<view class="footer-l-l">
									<image
										src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
										mode=""></image>
									<view>
										<p>haihai</p>
										<p>2020/22/22</p>
									</view>
								</view>
								<view class="footer-r">
									<u-icon name="chat"></u-icon>
									<u-icon name="volume"></u-icon>
								</view>
							</view>
							<view class="neirong">
								hhhhh
							</view>
							<ul>
								<li class="xiayiji">
									<view class="footer-l">
										<view class="footer-l-l">
											<image
												src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
												mode=""></image>
											<view>
												<p>haihai</p>
												<p>2020/22/22</p>
											</view>
										</view>
									</view>
								</li>
							</ul>
						</li>
						<li>
							<view class="footer-l">
								<view class="footer-l-l">
									<image
										src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
										mode=""></image>
									<view>
										<p>haihai</p>
										<p>2020/22/22</p>
									</view>
								</view>
								<view class="footer-r">
									<u-icon name="chat"></u-icon>
									<u-icon name="volume"></u-icon>
								</view>
							</view>
							<view class="neirong">
								hhhhh
							</view>
							<ul>
								<li class="xiayiji">
									<view class="footer-l">
										<view class="footer-l-l">
											<image
												src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
												mode=""></image>
											<view>
												<p>haihai</p>
												<p>2020/22/22</p>
											</view>
										</view>
									</view>
								</li>
							</ul>
						</li>
						<li>
							<view class="footer-l">
								<view class="footer-l-l">
									<image
										src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
										mode=""></image>
									<view>
										<p>haihai</p>
										<p>2020/22/22</p>
									</view>
								</view>
								<view class="footer-r">
									<u-icon name="chat"></u-icon>
									<u-icon name="volume"></u-icon>
								</view>
							</view>
							<view class="neirong">
								hhhhh
							</view>
							<ul>
								<li class="xiayiji">
									<view class="footer-l">
										<view class="footer-l-l">
											<image
												src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
												mode=""></image>
											<view>
												<p>haihai</p>
												<p>2020/22/22</p>
											</view>
										</view>
									</view>
								</li>
							</ul>
						</li>
						<li>
							<view class="footer-l">
								<view class="footer-l-l">
									<image
										src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
										mode=""></image>
									<view>
										<p>haihai</p>
										<p>2020/22/22</p>
									</view>
								</view>
								<view class="footer-r">
									<u-icon name="chat"></u-icon>
									<u-icon name="volume"></u-icon>
								</view>
							</view>
							<view class="neirong">
								hhhhh
							</view>
							<ul>
								<li class="xiayiji">
									<view class="footer-l">
										<view class="footer-l-l">
											<image
												src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
												mode=""></image>
											<view>
												<p>haihai</p>
												<p>2020/22/22</p>
											</view>
										</view>
									</view>
								</li>
							</ul>
						</li>
						<li>
							<view class="footer-l">
								<view class="footer-l-l">
									<image
										src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
										mode=""></image>
									<view>
										<p>haihai</p>
										<p>2020/22/22</p>
									</view>
								</view>
								<view class="footer-r">
									<u-icon name="chat"></u-icon>
									<u-icon name="volume"></u-icon>
								</view>
							</view>
							<view class="neirong">
								hhhhh
							</view>
							<ul>
								<li class="xiayiji">
									<view class="footer-l">
										<view class="footer-l-l">
											<image
												src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
												mode=""></image>
											<view>
												<p>haihai</p>
												<p>2020/22/22</p>
											</view>
										</view>
									</view>
								</li>
							</ul>
						</li>
						<li>
							<view class="footer-l">
								<view class="footer-l-l">
									<image
										src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
										mode=""></image>
									<view>
										<p>haihai</p>
										<p>2020/22/22</p>
									</view>
								</view>
								<view class="footer-r">
									<u-icon name="chat"></u-icon>
									<u-icon name="volume"></u-icon>
								</view>
							</view>
							<view class="neirong">
								hhhhh
							</view>
							<ul>
								<li class="xiayiji">
									<view class="footer-l">
										<view class="footer-l-l">
											<image
												src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
												mode=""></image>
											<view>
												<p>haihai</p>
												<p>2020/22/22</p>
											</view>
										</view>
									</view>
								</li>
							</ul>
						</li>
						<li>
							<view class="footer-l">
								<view class="footer-l-l">
									<image
										src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
										mode=""></image>
									<view>
										<p>haihai</p>
										<p>2020/22/22</p>
									</view>
								</view>
								<view class="footer-r">
									<u-icon name="chat"></u-icon>
									<u-icon name="volume"></u-icon>
								</view>
							</view>
							<view class="neirong">
								hhhhh
							</view>
							<ul>
								<li class="xiayiji">
									<view class="footer-l">
										<view class="footer-l-l">
											<image
												src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
												mode=""></image>
											<view>
												<p>haihai</p>
												<p>2020/22/22</p>
											</view>
										</view>
									</view>
								</li>
							</ul>
						</li>
						<li>
							<view class="footer-l">
								<view class="footer-l-l">
									<image
										src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
										mode=""></image>
									<view>
										<p>haihai</p>
										<p>2020/22/22</p>
									</view>
								</view>
								<view class="footer-r">
									<u-icon name="chat"></u-icon>
									<u-icon name="volume"></u-icon>
								</view>
							</view>
							<view class="neirong">
								hhhhh
							</view>
							<ul>
								<li class="xiayiji">
									<view class="footer-l">
										<view class="footer-l-l">
											<image
												src="https://static1.keepcdn.com/avatar/2020/09/30/17/06/e399b31b908c11af586732d631f1163f8d0c8a01.jpg?imageMogr2/thumbnail/90x"
												mode=""></image>
											<view>
												<p>haihai</p>
												<p>2020/22/22</p>
											</view>
										</view>
									</view>
								</li>
							</ul>
						</li>
					</ul>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			this.list.push(JSON.parse(uni.getStorageSync('userInfo')))
			console.log(this.list);
		},
		methods: {
			onguanzu(index) {
				console.log(this.list[index].guanzu);
				this.list[index].guanzu = !this.list[index].guanzu
			},
			onfanhui() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	.tou {
		height: 50px;
		background-color: white;
		display: flex;
	}

	.community-circle {
		margin-bottom: 70px;
		// border: 1px solid red;
	}

	.top {
		width: 95%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 10px;
		margin-top: 20px;

		.top-l {
			width: 200px;
			display: flex;
			justify-content: space-around;
		}

		button {
			width: 70px;
			height: 30px;
			line-height: 30px;
			font-size: 12px;
			border-radius: 15px;
			color: white;
			background-color: #24c789;
		}

		.btn {
			background-color: white;
			border: 1px solid #24c789;
			color: #24c789;
		}
	}

	.bottom {
		ul {
			list-style: none;

			li {
				h4 {
					width: 95%;
					margin: 10px 10px 10px 10px;
				}

				p {
					width: 95%;
					margin: 10px 10px 10px 10px;
					text-indent: 2em;
					line-height: 24px;
					font-size: 18px;
					// overflow: hidden;
					// white-space: nowrap;
					// text-overflow: ellipsis;
					// -webkit-line-clamp: 4;
					// display: -webkit-box;
					// -webkit-box-orient: vertical;
					// overflow: hidden;
					// text-overflow: ellipsis;
				}
			}
		}

		.bottom-img {
			display: flex;

			flex-wrap: wrap;

			li {
				margin: 10px 1px 10px 10px;
			}

		}
	}

	.footer {
		width: 100%;

		ul {
			width: 100%;

			.footer-l {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.footer-l-l {
					display: flex;
					justify-content: flex-start;

					image {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						padding-right: 10px;
					}
				}


			}

			.footer-r {
				width: 150px;
				display: flex;
				justify-content: space-evenly;
			}

			.neirong {
				width: 100%;
				margin: 20rpx 0rpx;
				padding-left: 50px;
			}

			.xiayiji {
				padding-left: 50px;
			}

		}
	}
</style>
